<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Flying Saucer: Centered Fluid Content with Auto Margins</title>
    <link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen" />
    <style type="text/css" media="screen">
        body {
            font-size: 12px;
            font-family: Verdana, Arial, Tahoma, SunSans-Regular;
            margin: 50px 10px 50px 10px;
            text-align: center;
        }

        #content {
            width: 500px;
            padding: 0px;
            text-align: left;
            background-color: #fff;
            overflow: auto;
			margin: 0px auto;
		}

        p, pre {
            margin: 0px;
            padding: 10px;
        }
    </style>
  </head>

  <body>
    <div id="content">
      <p class="link right-link" style="margin: 10px; float: right; font: 9pt normal sans-serif"><a href="demoNav:forward">Next Page</a></p>
      <p class="link left-link" style="margin: 10px; font: 9pt normal sans-serif"><a href="demoNav:back">Previous Page</a></p>

        <p id="fslogo" style="padding-left: 10px;">Flying Saucer</p>
        <span id="pagebyline" style="padding-left: 10px;">
          Pure CSS Layouts
        </span>
        <br />
        <br />

        <p><b style="font-size: large">Centered Fluid Content with Auto Margins:</b> This sample page, using ideas from
			http://bluerobot.com/web/css/center1.html, shows a simple, centered-content
			fluid layout where the width of the content is fixed, and where the content is centered by setting
			margins to "auto". Note in this case the body has no left/right margin set (as in the other
			centered content example).</p>

        <p>Note in this example the layout will break because of the "pre" block below--but holds up
            pretty well till you reduce beyond the minimum necessary for the preserved formatting.</p>

        <pre>
        body {
            margin: 50px 0px;
            font-size: 12px;
            text-align: center;
        }

        #content {
            width: 500px;
            margin: 0px auto;
            overflow: auto;
            padding: 0px;
            text-align: left;
        }

        p, pre {
            margin: 0px;
            padding: 10px;
        }
        </pre>

        <p>
            Por efika lingvoinstruado Plurlingveco La Esperantokomunumo estas?
            Homa emancipigxo projekto por ebligi al cxiu homo partopreni kiel
            individuo en la. Por la provizo de tiu sxanco Lingvaj rajtoj La
            malegala disdivido de. Kies parolantoj estas senescepte du aux
            plurlingvaj Cxiu komunumano akceptis la taskon lerni. En kursoj por
            la lingva! Grandan diversecon de lingvoj en la mondo kiel baron al
            komunikado!
        </p>
    </div>
  </body>
</html>

